<template>
    <div class="mine">
        <div class="header">
            <ul class="switch">
                <li class="switch-item"
                    :class="{'active': currentIndex === index}"
                    v-for="(item, index) in switches"
                    @click="switchItem(index)"
                    :key="index">
                    {{item.name}}
                </li>
            </ul>
        </div>
        <scroll class="content" ref="list" :data="songList">
            <song-list
                :songs="songList"
                :rank="rank"
                @select="selectItem"
                @clickIcon="setMenuSong">
            </song-list>
            <div class="no-song" v-show="!songList.length">
                <p class="text">{{noSongMsg}}</p>
            </div>
        </scroll>
    </div>
</template>

<script>
    import SongList from 'base/song-list/song-list'
    import PlayAll from 'components/play-all/play-all'
    import Scroll from 'base/scroll/scroll'
    import PlayListMixin from 'common/mixins/play-list'
    import { getStyle } from 'common/js/dom'
    import { MINI_PLAYER_HEIGHT, TAB_HEIGHT } from 'common/js/config'
    import { mapGetters, mapMutations, mapActions } from 'vuex'

    const PLAY_HISTORY = 1
    const FAVORITE_LIST = 0

    export default {
        mixins: [PlayListMixin],
        data() {
            return {
                currentIndex: 1,
                switches: [
                    {
                        name: '我的喜欢',
                        noSongMsg: '暂无收藏歌曲'
                    },
                    {
                        name: '最近播放',
                        noSongMsg: '暂无播放历史'
                    }
                ],
                rank: false
            }
        },
        computed: {
            songList() {
                let res = []
                switch (this.currentIndex) {
                    case FAVORITE_LIST:
                        res = this.favoriteList
                        break
                    case PLAY_HISTORY:
                        res = this.playHistory
                        break
                }
                return res
            },
            noSongMsg() {
                return this.switches[this.currentIndex].noSongMsg
                    ? this.switches[this.currentIndex].noSongMsg : '暂无歌曲'
            },
            ...mapGetters([
                'playHistory',
                'favoriteList'
            ])
        },
        methods: {
            switchItem(index) {
                this.currentIndex = index
            },
            selectItem(item, index) {
                this.selectPlay({
                    list: this.songList,
                    index: index
                })
            },
            // 重设滚动部分底部距离
            handlePlayList(playList) {
                const bottom = playList.length > 0 ? `${MINI_PLAYER_HEIGHT + TAB_HEIGHT}px` : ''
                const el = this.$refs.list.$el
                getStyle(el, 'bottom', bottom)
                this.$refs.list.refresh()
            },
            ...mapMutations({
                setMenuSong: 'SET_MENU_SONG'
            }),
            ...mapActions([
                'selectPlay'
            ])
        },
        components: {
            SongList,
            Scroll,
            PlayAll
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .mine
        .header
            padding: 15px
            text-align: center
            // background: $color-background-w
            .switch
                position: relative
                font-size: 0
                &:first-child:after
                    content: ''
                    position: absolute
                    top: 3px
                    bottom: 3px
                    right: 50%
                    width: 1px
                    background: $color-text
                .switch-item
                    position: relative
                    display: inline-block
                    padding: 0 10px
                    width: 80px
                    font-size: $font-size-medium-l
                    color: $color-text-l
                    transition: all .1s
                    &.active
                        top: -1px
                        font-size: $font-size-medium-x
                        font-weight: bold
                        color: $color-text
        .content
            position: fixed
            top: 46px
            bottom: $height-tab
            left: 0
            right: 0
            overflow: hidden
            padding-bottom: 15px
            .no-song
                position: absolute
                top: 45%
                width: 100%
                transform: translate3d(0, 50%, 0)
                text-align: center
                color: $color-text-d
                font-size: $font-size-large
</style>
